<template>
	<div class="split-box">
		<v-dialog
			title="物业拆分"
			:show.sync="dialogVisible"
			:closeOnClickModal=false
			@beforeClose="beforeClose"
			width="1200px">
			<div style="padding: 5px">
				<el-steps :active="active" align-center>
					<el-step title="物业信息确认"></el-step>
					<el-step title="执行房间拆分"></el-step>
				</el-steps>
				<div class="resource-manage">
					<div class="card-box">
						<el-form v-show="active===0" class="form-wrap" size="small">
							<el-form-item label="物业名称">
								<el-col>{{sourceRoom.propertyName}}</el-col>
							</el-form-item>
							<el-form-item label="楼层">
								<el-col>{{sourceRoom.floor}}</el-col>
							</el-form-item>
							<el-form-item label="套内面积(m²)" prop="dealPrice">
								<el-col>{{sourceRoom.unitConstructionArea}}</el-col>
							</el-form-item>
							<el-form-item label="建筑面积(m²)" prop="dealDate">
								<el-col>{{sourceRoom.buildingArea}}</el-col>
							</el-form-item>
							<el-form-item label="备注" class="full">
								<el-col>{{sourceRoom.remarks}}</el-col>
							</el-form-item>
						</el-form>


						<div style="overflow: hidden">
							<el-button class="btn-pro" v-show="active===1" size="mini" type="text" plain @click="addRoom">新增
							</el-button>
						</div>
						<el-form v-show="active===1" :model="fromData" ref="fromData" class="form-wrap2 full" size="small">
							<el-table
								:data="fromData.roomInfo"
								align="center">
								<el-table-column label="序号" width="60" type="index">
								</el-table-column>
								<el-table-column label="物业名称" width="260">
									<template slot-scope="scope">
										<el-form-item :prop="'roomInfo.'+scope.$index+'.propertyName'"
																	:rules="fromData.room_rules.propertyName">
											{{baseRoomName}}-
											<el-input style="width: 80px" onkeyup="value=value.replace(/[^\w\.\/]/ig,'')" maxlength="5"
																v-model="scope.row.propertyName" @change="propertyNameOnly(scope)"></el-input>
										</el-form-item>
									</template>
								</el-table-column>
								<el-table-column label="建筑面积（产权）(m²)" width="200">
									<template slot-scope="scope">
										<el-form-item :prop="'roomInfo.'+scope.$index+'.buildingArea'"
																	:rules="fromData.room_rules.buildingArea">
											<el-input maxlength="20" v-model="scope.row.buildingArea"></el-input>
										</el-form-item>
									</template>
								</el-table-column>
								<el-table-column label="套内面积(m²)">
									<template slot-scope="scope">
										<el-form-item :prop="'roomInfo.'+scope.$index+'.unitConstructionArea'"
																	:rules="fromData.room_rules.unitConstructionArea">
											<el-input maxlength="20" v-model="scope.row.unitConstructionArea"></el-input>
										</el-form-item>
									</template>
								</el-table-column>
								<el-table-column label="物业类型">
									<template slot-scope="scope">
										<el-form-item :prop="'roomInfo.'+scope.$index+'.projectType'"
																	:rules="fromData.room_rules.projectType">
											<el-select v-model="scope.row.projectType" @change="changeProjectType(scope.row)" placeholder="请选择物业类型">
												<el-option
													v-for="item in propertyTypes"
													:key="item.value"
													:label="item.label"
													:value="item.value">
												</el-option>
											</el-select>
										</el-form-item>
									</template>
								</el-table-column>
								<el-table-column label="物业用途">
									<template slot-scope="scope">
										<el-form-item :prop="'roomInfo.'+scope.$index+'.projectSubclassType'"
																	:rules="fromData.room_rules.projectSubclassType">
											<el-select v-model="scope.row.projectSubclassType" placeholder="请选择物业用途">
												<el-option
													v-for="item in filterSelectData(scope.row.projectType)"
													:key="item.value"
													:label="item.label"
													:value="item.value">
												</el-option>
											</el-select>
										</el-form-item>
									</template>
								</el-table-column>
								<el-table-column label="备注">
									<template slot-scope="scope">
										<el-form-item :prop="'roomInfo.'+scope.$index+'.remarks'" :rules="fromData.room_rules.remarks">
											<el-input maxlength="50" v-model="scope.row.remarks"></el-input>
										</el-form-item>
									</template>
								</el-table-column>

								<el-table-column label="操作" width="80">
									<template slot-scope="scope">
										<el-button size="small" type="text" @click="removeRoom(scope.$index)">删除</el-button>
									</template>
								</el-table-column>
							</el-table>
						</el-form>
					</div>
				</div>

				<el-button style="margin-top: 12px;" class="btn-pro" v-show="active===1" @click="commit">完成</el-button>
				<el-button style="margin-top: 12px;" class="btn-pro" @click="cancel">取消</el-button>
				<el-button style="margin-top: 12px;" class="btn-pro" v-show="active===0" @click="next">下一步</el-button>
				<el-button style="margin-top: 12px;" class="btn-pro" v-show="active===1" @click="back">上一步</el-button>
			</div>
		</v-dialog>
	</div>
</template>

<script>
	import {doubleValidate} from '~/utils/validate.js'
	import {validateFacRoomName} from "~/views/property-info-sys/project-manage/api/project_manage";
	import {getDict} from '~/utils'

	export default {
		name: "split-room",
		data() {
			return {
				dialogVisible: false,
				active: 0,
				baseRoomName: '',
				fromData: {
					room_rules: {
						propertyName: [
							{required: true, message: '请输入物业名称', trigger: 'blur'},
							{min: 0, max: 30, message: "长度在0-30个字符串", trigger: "blur"},
						],
						buildingArea: [
							{required: true, message: '请填写建筑面积', trigger: 'blur'},
							{validator: doubleValidate, trigger: "change"}
						],
						unitConstructionArea: [
							{required: true, message: '请填写套内面积', trigger: 'blur'},
							{validator: doubleValidate, trigger: "change"}
						],
						projectType: [
							{required: true, message: '请选择物业类型', trigger: 'blur'}
						],
						projectSubclassType: [
							{required: true, message: '请选择物业用途', trigger: 'blur'}
						],
						remarks: [{min: 0, max: 200, message: "长度在0-200个字符串", trigger: "blur"},]
					},
					roomInfo: [],
				},
				sourceRoom: {},
				propertyTypes: [],
				useTypes: [],
				useTypesFilter: []
			}
		},
		mounted() {
			this.propertyTypes = getDict('property_types') //物业类型
			this.useTypes = getDict('property_use_types') //物业用途
			// this.useTypesFilter = this.useTypes.filter(ut => ut.value.indexOf(this.baseForm.projectType) == 0)
		},
		methods: {
			//jiaj 根据物业类型，获取对应的物业用途
			changeProjectType(row) {
				row.projectSubclassType =""
			},
			filterSelectData(projectType){
				//重置物业用途
				let filterData = []
				if (projectType) {
					//过滤物业用途
					filterData = this.useTypes.filter(ut => ut.value.indexOf(projectType) == 0)
				}
				return filterData
			},
			beforeClose(done) {
				this.cancel()
				done()
			},
			next() {
				if (this.active++ > 1) this.active = 0;
			},
			back() {
				if (this.active-- < 0) this.active = 0;
			},
			cancel() {
				this.dialogVisible = false
			},
			commit() {
				let saveForm = this.fromData.roomInfo;
				if (saveForm == null || saveForm.length == 0) {
					this.$alert("拆分信息不能为空！")
					return false;
				}
				let buildingAreaTotal = this.sourceRoom.buildingArea;
				let unitConstructionAreaTotal = this.sourceRoom.unitConstructionArea;
				if (!unitConstructionAreaTotal) {
					unitConstructionAreaTotal = 0
				}
				this.$refs['fromData'].validate((valid) => {
					if (valid) {
						//计算建筑面积总是否一致
						let spBuildingArea = saveForm.reduce((sum, cur) => Number(cur.buildingArea) + sum, 0)
						let spUnitConstructionArea = saveForm.reduce((sum, cur) => Number(cur.unitConstructionArea) + sum, 0)
						if (spBuildingArea != buildingAreaTotal) {
							this.$alert("拆分后的房源建筑面积总和(" + spBuildingArea + ")不等于拆分前的房源建筑面积(" + buildingAreaTotal + ")！")
							return false;
						}
						if (spUnitConstructionArea != unitConstructionAreaTotal) {
							this.$alert("拆分后的房源套内面积总和(" + spUnitConstructionArea + ")不等于拆分前的房源套内面积(" + unitConstructionAreaTotal + ")！")
							return false;
						}
						let sd = {}
						sd['infos'] = saveForm
						sd['oldRoomId'] = this.sourceRoom.roomId
						this.$emit("doSplit", sd)
						this.cancel();
					}
				})

			},
			addRoom() {
				this.fromData.roomInfo.push({
					propertyName: '',
					buildingArea: '',
					unitConstructionArea: '',
					projectSubclassType: this.sourceRoom.useType,
					projectType: this.sourceRoom.propertyType,
					remarks: ''
				})
			},
			removeRoom(index) {
				this.fromData.roomInfo.splice(index, 1)
			},
			//验证物业名称唯一
			propertyNameOnly(value) {
				if (this.fromData.roomInfo.length > 0) {
					//    判断物业名称在集合中是否存在
					let filterName = this.fromData.roomInfo.filter(ri => {
						if (value.row.propertyName == ri.propertyName) {
							return ri
						}
					})
					if (filterName && filterName.length > 1) {
						this.$message.error("物业名称已存在，请重新输入！")
						this.fromData.roomInfo[value.$index].propertyName = ''
						return
					}

				}
				validateFacRoomName({"roomName": this.baseRoomName + "-" + value.row.propertyName}).then(res => {
					if (res.data.data !== 0) {
						this.$message.error("物业名称已存在，请重新输入！")
						this.fromData.roomInfo[value.$index].propertyName = ''
					}
				})
			}
		}
	}
</script>

<style scoped lang="scss">

	@include formWrap(2);
	.form-wrap2 {
		display: grid;
		grid-template-columns: repeat(1, 1fr);
		column-gap: 30px;
		padding: 16px 24px;
	}

	.split-box {
		overflow: hidden;

		.btn-pro {
			float: right;
			margin: 10px;
		}
	}
</style>
